<template>
  <div class="main">
    <div class="left">
      <studentMainleft></studentMainleft>
    </div>
    <div class="right">
      <template>
        <el-table :data="applicationTable" style="width: 100%" @row-click="rowclick">
          <el-table-column prop="ApplicantsId" label="申请人学号" width="180"></el-table-column>
          <el-table-column prop="ApplicationType" label="申请类型" width="180"></el-table-column>
          <el-table-column prop="ByTheTime" label="申请时间"></el-table-column>
        </el-table>
        <el-drawer title="审批详情" :visible.sync="drawer" :direction="direction" size="40%">
          <div class="personInfo">
            <el-descriptions title="个人信息" :column="1">
              <el-descriptions-item label="姓名">
                {{stuInfo.StuName}}
                <template
                  v-if="stuInfo.StuName!=oldStuInfo.StuName"
                >{{oldStuInfo.StuName}}</template>
              </el-descriptions-item>

              <el-descriptions-item label="学号">
                {{stuInfo.StuId}}
                <template
                  v-if="stuInfo.StuId!=oldStuInfo.StuId"
                >{{oldStuInfo.StuId}}</template>
              </el-descriptions-item>
              <el-descriptions-item label="手机号">
                {{stuInfo.StuPhone}}
                <template
                  v-if="stuInfo.StuPhone!=oldStuInfo.StuPhone"
                >{{oldStuInfo.StuPhone}}</template>
              </el-descriptions-item>
              <el-descriptions-item label="性别">
                {{stuInfo.StuSex}}
                <template
                  v-if="stuInfo.StuSex!=oldStuInfo.StuSex"
                >{{oldStuInfo.StuSex}}</template>
              </el-descriptions-item>
              <el-descriptions-item label="年龄">
                {{stuInfo.StuAge}}
                <template
                  v-if="stuInfo.StuAge!=oldStuInfo.StuAge"
                >{{oldStuInfo.StuAge}}</template>
              </el-descriptions-item>
              <el-descriptions-item label="入学时间">
                {{stuInfo.StubackTime}}
                <template
                  v-if="stuInfo.StubackTime!=oldStuInfo.StubackTime"
                >{{oldStuInfo.StubackTime}}</template>
              </el-descriptions-item>
              <el-descriptions-item label="邮箱">
                {{stuInfo.StuEmail}}
                <template
                  v-if="stuInfo.StuEmail!=oldStuInfo.StuEmail"
                >{{oldStuInfo.StuEmail}}</template>
              </el-descriptions-item>
              <el-descriptions-item label="籍贯">
                {{stuInfo.NativePlace}}
                <template
                  v-if="stuInfo.NativePlace!=oldStuInfo.NativePlace"
                >{{oldStuInfo.NativePlace}}</template>
              </el-descriptions-item>
              <el-descriptions-item label="政治面貌">
                {{stuInfo.PoliticalLandscape}}
                <template
                  v-if="stuInfo.PoliticalLandscape!=oldStuInfo.PoliticalLandscape"
                >{{oldStuInfo.PoliticalLandscape}}</template>
              </el-descriptions-item>
              <el-descriptions-item label="民族">
                {{stuInfo.National}}
                <template
                  v-if="stuInfo.National!=oldStuInfo.National"
                >{{oldStuInfo.National}}</template>
              </el-descriptions-item>
              <el-descriptions-item label="专业">
                {{stuInfo.ProfessionalName }}
                <template
                  v-if="stuInfo.ProfessionalName!=oldStuInfo.ProfessionalName"
                >{{oldStuInfo.ProfessionalName}}</template>
              </el-descriptions-item>
              <el-descriptions-item label="学院">
                {{stuInfo.CollegeName}}
                <template
                  v-if="stuInfo.CollegeName!=oldStuInfo.CollegeName"
                >{{oldStuInfo.CollegeName}}</template>
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </el-drawer>
      </template>
    </div>
  </div>
</template>

<script>
import studentMainleft from "@/components/studentMainleft";
export default {
  components: {
    studentMainleft
  },
  data() {
    return {
      drawer: false,
      direction: "rtl",
      user: null,
      applicationTable: [],
      stuInfo: {},
      oldStuInfo: {
        CollegeName: "信息工程学院",
        Grade: "2020",
        National: "汉",
        NativePlace: "湖南郴州",
        PoliticalLandscape: "团员",
        ProfessionalName: "软件技术()",
        StuAge: 18,
        StuCarid: "123456789102369874",
        StuClassId: "2020030903",
        StuEmail: "1294749811@qq.com",
        StuId: "root",
        StuName: "czy",
        StuPhone: "12345678910",
        StuSex: "男",
        StubackTime: "2022-2-5",
        TheCounselorId: "9001",
        TheCounselorName: "hy",
        TheCounselorPhone: "18221731149",
        Token: "70fb0b0c-ed90-4376-9756-74ea012df502"
      }
    };
  },
  created() {
    this.GetStudentApplicationFormByWorkerToken();
  },
  mounted() {},
  methods: {
    rowclick(row, column, event) {
      var arr = JSON.parse(row.InfoJson);
      this.stuInfo = arr[0];
      this.drawer = true;
    },
    GetStudentApplicationFormByWorkerToken() {
      this.user = JSON.parse(sessionStorage.getItem("user"));
      this.$axios({
        method: "get",
        url: this.$api.GetStudentApplicationFormByWorkerToken,
        params: {
          token: this.user.Token,
          classId: this.user.ClassId
        }
      }).then(res => {
        console.log(res);
        this.applicationTable = res.data.message;
      });
    }
  }
};
</script>

<style scoped>
.main {
  display: flex;
  height: 100%;
}
.right {
  width: 100%;
  background-color: white;
  height: 80%;
  margin-left: 10px;
}
.personInfo {
  margin: 30px;
}
</style>
